<template>
  <p style="line-height: 3.125rem;font-size: 1rem;font-weight: bold;" class="main_text">收车统计（平台）</p>
  <div class="main">
    <!-- ############################################## 查询 ############################################## -->
    <div class="top mb20 p20">
      <el-form :model="serachData">
        <el-form-item label="统计时间：">
          <div>
            <el-date-picker v-model="serachData.time" type="daterange" format="YYYY-MM-DD" date-format="YYYY-MM-DD"
              time-format="HH:mm" range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间"
              @change="dateChange" />
          </div>&emsp;
          <el-button type="primary" size="small" link @click="today">今天</el-button>
          <el-button type="primary" size="small" link @click="yesterday">昨天</el-button>
          <el-button type="primary" size="small" link @click="threeDays">近三天</el-button>
          <el-button type="primary" size="small" link @click="weeks">近一周</el-button>
          <el-button type="primary" size="small" link @click="month">近一个月</el-button>
          <el-button type="primary" size="small" link @click="season">近三个月</el-button>
          <el-button type="primary" size="small" link @click="year">近一年</el-button>
        </el-form-item>
        <div class="df fww">
          <el-form-item label="拆解厂名称：" style="width: 20%;">
            <el-select v-model="serachData.companyNode" placeholder="拆解厂名称" class="mr20" clearable filterable>
              <el-option v-for="item in companyList" :key="item.id" :label="item.companyName" :value="item.node" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button type="primary" plain @click="resc">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="contentt mb20">
      <div class=" df jcsb">
        <div class="contentt_l p20 mr20">
          <p style="font-size: 12px;color: #B2B2B2;" class="text_over">平台累计报废车数量
            <span v-if="startTime != null || endTime != null">（统计时间：{{ startTime }}&nbsp;至&nbsp;{{ endTime }}）</span>
          </p>
          <div class="df  aic jcsb">
            <p style="font-size: 24px;">{{ sumData.sumNum }} <span style="font-size: 14px;color: #666;">辆</span></p>
            <img style="width: 40px;" src="../../../assets//images/bf.png" alt="">
          </div>
          <p style="font-size: 14px;" class="text_over">本月&nbsp;{{ thisMonthData.sumNum }}&emsp;较上月
            <span style="color: #57D4B5;" v-if="thisMonthData.sumNum > lastMonthData.sumNum">&nbsp;↑{{
              lastMonthData.sumNum }}</span>
            <span style="color: #F56C6C;" v-else-if="thisMonthData.sumNum < lastMonthData.sumNum">&nbsp;↓{{
              lastMonthData.sumNum }}</span>
            <span style="color: #57D4B5;" v-else>&nbsp;--</span>
          </p>
        </div>
        <div class="contentt_l p20 mr20">
          <p style="font-size: 12px;color: #B2B2B2;" class="text_over">
            平台累计收车金额
            <span v-if="startTime != null || endTime != null">（统计时间：{{ startTime }}&nbsp;至&nbsp;{{ endTime }}）</span>
          </p>
          <div class="df  aic jcsb">
            <p style="font-size: 24px;">{{ sumData.sumTotalPrice }} <span style="font-size: 14px;color: #666;">元</span>
            </p>
            <img style="width: 40px;" src="../../../assets//images/je.png" alt="">
          </div>
          <p style="font-size: 14px;" class="text_over">本月&nbsp;{{ thisMonthData.sumTotalPrice }}&emsp;较上月
            <span style="color: #57D4B5;" v-if="thisMonthData.sumTotalPrice > lastMonthData.sumTotalPrice">&nbsp;↑{{
              lastMonthData.sumTotalPrice }}</span>
            <span style="color: #F56C6C;"
              v-else-if="thisMonthData.sumTotalPrice < lastMonthData.sumTotalPrice">&nbsp;↓{{
                lastMonthData.sumTotalPrice }}</span>
            <span style="color: #57D4B5;" v-else>&nbsp;--</span>
          </p>
        </div>
        <div class="contentt_l p20">
          <p style="font-size: 12px;color: #B2B2B2;" class="text_over">平台拖车费用
            <span v-if="startTime != null || endTime != null">（统计时间：{{ startTime }}&nbsp;至&nbsp;{{ endTime }}）</span>
          </p>
          <div class="df  aic jcsb">
            <p style="font-size: 24px;">{{ sumData.sumDriverIncome }} <span
                style="font-size: 14px;color: #666;">元</span></p>
            <img style="width: 40px;" src="../../../assets//images/tc.png" alt="">
          </div>
          <p style="font-size: 14px;" class="text_over">本月&nbsp;{{ thisMonthData.sumDriverIncome }}&emsp;较上月
            <span style="color: #57D4B5;" v-if="thisMonthData.sumDriverIncome > lastMonthData.sumDriverIncome">&nbsp;↑{{
              lastMonthData.sumDriverIncome }}</span>
            <span style="color: #F56C6C;"
              v-else-if="thisMonthData.sumDriverIncome < lastMonthData.sumDriverIncome">&nbsp;↓{{
                lastMonthData.sumDriverIncome }}</span>
            <span style="color: #57D4B5;" v-else>&nbsp;{{ lastMonthData.sumDriverIncome }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="content p20">
      <div class="content_tips df aic jcsb">
        <el-button type="primary" plain>导出数据</el-button>
        <span v-if="startTime != null || endTime != null">统计时间：{{ startTime }}&nbsp;至&nbsp;{{ endTime }}</span>
      </div>
      <el-table :data="tableData" style="width: 100%" class="mt20" max-height="460">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="拆解厂名称" prop="companyName" />
        <el-table-column label="报废车辆总数" prop="num" />
        <el-table-column label="拖车费用（元）" prop="driverIncome" />
        <el-table-column label="收车总额（元）" prop="totalPrice" />
        <el-table-column label="创建时间" prop="createdAt" />
        <el-table-column label="操作" fixed="right">
          <template #default="props">
            <el-button size="small" link type="primary" @click="checkBtn(props.row)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- #################################### 分页 #################################### -->
          <smartPager
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="Number(total)"
            @change="handleCurrentChange" />
    </div>
  </div>
  <el-dialog v-model="dialogVisible" align-center @close="closeDialogVisible">
    <template #header>
      <p style="color: #fff;">{{ digCompanyName }} - 收车明细</p>
    </template>
    <el-form class="df">
      <el-form-item label="统计时间：">
        <el-date-picker v-model="digtime" type="daterange" format="YYYY-MM-DD" date-format="YYYY-MM-DD"
          time-format="HH:mm" range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间"
          @change="digdateChange" />
      </el-form-item>
      <el-form-item class="ml20">
        <el-button type="primary" @click="dialogSearchBtn">查询</el-button>
        <el-button type="primary" plain @click="dialogresc">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="digtableData" style="width: 100%" class="mt20" max-height="460">
      <el-table-column label="序号" prop="id" width="100" />
      <el-table-column label="时间" prop="createdAt" />
      <el-table-column label="订单编号" prop="orderSn" />
      <el-table-column label="拖车费用（元）" prop="driverIncome" />
      <el-table-column label="报废金额（元）" prop="totalPrice" />
    </el-table>
    <template #footer>
      <span class="dialog-footer">
        <div class="df aic jcsb">
          <el-button type="primary" link size="small">导出明细</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </div>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { Wallet, Edit } from '@element-plus/icons-vue'
import { formatTime, formatTimeAll } from '@/filters/index'
import { RequestStatisticGetRecycleCarTotalInfo, RequestStatisticGetRecycleCarStatistic, RequestCompanyList, RequestStatisticgetCompanyRecycleDetail } from '@/api/path/index.js'
import { ref } from 'vue';
/* ************************ 分页获取数据 ************************ */
const dialogVisible = ref<any>(false)
const digCompanyName = ref<any>('')
const digCompanyNode = ref<any>('')
const digtime = ref<any>(null)
const digstartAt = ref<any>(null)
const digendAt = ref<any>(null)
const digtableData = ref<any>([])
const digdateChange = (e: any) => {
  e[0] = formatTime(e[0])
  e[1] = formatTime(e[1])
}

const dialogSearchBtn = () => {
  console.log(digtime.value);
  if (digtime.value != null) {
    digstartAt.value = formatTime(digtime.value[0]) + 'T00:00:00'
    digendAt.value = formatTime(digtime.value[1]) + 'T23:59:59'
  }
  getDetailData()
}
const dialogresc = () => {
  digtime.value = null
  digstartAt.value = null
  digendAt.value = null
  getDetailData()
}
const getDetailData = () => {
  RequestStatisticgetCompanyRecycleDetail({
    page: 1,
    rows: 999,
    startAt: digstartAt.value,
    endAt: digendAt.value,
    companyNode: digCompanyNode.value
  }).then((res: any) => {
    if (res.success == true) {
      res.resultObj.data.forEach((item: any) => {
        item.createdAt = formatTimeAll(item.createdAt)
      })
      digtableData.value = res.resultObj.data
    }
  })
}
const checkBtn = (e: any) => {
  digCompanyName.value = e.companyName
  digCompanyNode.value = e.companyNode
  getDetailData()
  dialogVisible.value = true
}
const closeDialogVisible = () => {
  digtime.value = null
  digstartAt.value = null
  digendAt.value = null
}
const companyList = ref<any>([])
const getCompanyList = () => {
  if (JSON.parse(localStorage.getItem('roleInfo')!).company == 0) {
    RequestCompanyList().then((res: any) => {
      companyList.value = res.resultObj
    })
  }
}
getCompanyList()
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0)
const serachData = ref<any>({
  companyNode: null,
  time: null,
})
const startAt = ref<any>(null)
const endAt = ref<any>(null)
const startTime = ref<any>(null)
const endTime = ref<any>(null)
const tableData = ref<any>([
  {
    id: 'hello',
  }
]);
const sumData = ref<any>({
  sumNum: '',
  sumDriverIncome: '',
  sumTotalPrice: '',
})
const thisMonthData = ref<any>({
  sumNum: '',
  sumDriverIncome: '',
  sumTotalPrice: '',
})
const lastMonthData = ref<any>({
  sumNum: '',
  sumDriverIncome: '',
  sumTotalPrice: '',
})
const getData = () => {
  RequestStatisticGetRecycleCarStatistic({
    startAt: startAt.value,
    endAt: endAt.value,
  }).then((res: any) => {
    sumData.value = res.resultObj.sumData[0]
    thisMonthData.value = res.resultObj.thisMonthData[0]
    lastMonthData.value = res.resultObj.lastMonthData[0]
    console.log(sumData.value);
    console.log(thisMonthData.value);
    console.log(lastMonthData.value);
  })
  RequestStatisticGetRecycleCarTotalInfo({
    pageSize: pageSize.value,
    currentPage: currentPage.value,
    companyNode: serachData.value.companyNode,
    startAt: startAt.value,
    endAt: endAt.value,
  }).then((res: any) => {
    res.resultObj.data.forEach((item: any) => {
      item.createdAt = formatTimeAll(item.createdAt)
    });
    tableData.value = res.resultObj.data
    total.value = res.resultObj.total
  })
}
getData()
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const searchBtn = () => {
  if (serachData.value.time != null) {
    startTime.value = formatTime(serachData.value.time[0])
    endTime.value = formatTime(serachData.value.time[1])
    startAt.value = formatTime(serachData.value.time[0]) + 'T00:00:00'
    endAt.value = formatTime(serachData.value.time[1]) + 'T23:59:59'
  }
  getData()
  console.log('startAt.value', startAt.value);
  console.log('endAt.value', endAt.value);
  console.log('serachData.value.time', serachData.value.time);
}
const dateChange = (e: any) => {
  e[0] = formatTime(e[0])
  e[1] = formatTime(e[1])
}
// 今天
const today = () => {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() - 0);
  serachData.value.time = [formatTime(tomorrow), formatTime(today)]
}
// 昨天
const yesterday = () => {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() - 1);
  serachData.value.time = [formatTime(tomorrow), formatTime(today)]
}
// 昨天
const threeDays = () => {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() - 3);
  serachData.value.time = [formatTime(tomorrow), formatTime(today)]
}
// 周
const weeks = () => {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() - 7);
  serachData.value.time = [formatTime(tomorrow), formatTime(today)]
}
// 一个月
const month = () => {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() - 30);
  serachData.value.time = [formatTime(tomorrow), formatTime(today)]
}
// 三个月
const season = () => {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() - 90);
  serachData.value.time = [formatTime(tomorrow), formatTime(today)]
}
// 年
const year = () => {
  const today = new Date();
  const tomorrow = new Date(today);
  tomorrow.setDate(today.getDate() - 365);
  serachData.value.time = [formatTime(tomorrow), formatTime(today)]
}
// 重置
const resc = () => {
  startTime.value = null
  endTime.value = null
  startAt.value = null
  endAt.value = null
  serachData.value.time = null
  serachData.value.companyNode = null
  getData()
}
</script>

<style scoped lang="scss">
.text_over {
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main {
  width: 100%;

  .top {
    width: 100%;
    background-color: #fff;
  }

  .contentt {
    width: 100%;

    .contentt_l {
      width: calc((100% - 40px) / 3);
      background-color: #fff;
    }
  }

  .content {
    width: 100%;
    background-color: #fff;

    .content_tips {
      font-size: 14px;
      color: #999;
    }
  }
}

.icon_i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6.875rem;
  right: 0;
  margin: auto 0;
}

.downLoad {
  line-height: 1rem;
  margin-left: .625rem;
  color: #116cf8;
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

// ::v-deep .el-date-editor{
//   width: 400px !important;
// }
.drawer_top {
  width: 100%;
  background-color: #fff;
  border-radius: .5rem;
}

/* 弹出框样式 */
::v-deep .el-overlay {
  .el-dialog__header {
    background-color: #116cf8;
    margin-right: 0;

    .el-icon svg {
      color: #fff;
    }
  }

  .el-dialog__title {
    color: #fff;
  }

  .el-button {
    .el-icon svg {
      color: #116cf8;
    }
  }
}

::v-deep .el-drawer {
  .el-overlay .el-icon svg {
    color: red;
  }

  .el-drawer__header {
    margin-bottom: 0;
  }
}

.DocumentNumber {
  .el-button {
    background-color: #fff;
    border: .0625rem solid #dcdfe6;
    border-left: none;
  }
}

.drawer_bottom {
  width: 100%;
  height: 10%;
  background-color: #fff;
  padding: 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 上传框 */
.upload {
  width: 7.625rem;
  height: 7.625rem;
  border-radius: .375rem;
  background-color: #fafafa;
  overflow: hidden;
  border: .0625rem dashed #cdd0d6;
  position: relative;
}

.upload:hover {
  border: .0625rem dashed #116cf8;
  transition: 500ms;

  .add {
    color: #116cf8;
    transition: 500ms;
  }
}

.add {
  font-size: 2.25rem;
  color: #cccccc;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

::v-deep .el-upload-list__item,
::v-deep .el-upload-list__item-thumbnail,
::v-deep .el-upload {
  width: 7.5rem;
  height: 7.5rem;
}

::v-deep .el-upload {
  opacity: 0;
}
</style>